<template>
    <div>
      <!-- 搜索结果页-头部导航 -->
      <div class="search-result-container">
        <!-- 点击实现后退效果 -->
        <van-nav-bar
          title="搜索结果"
          left-arrow
          @click-left="$router.go(-1)"
          fixed
        />
      </div>
      <!-- 文章列表 -->
      <van-list
      v-model="loadding"
      :finished="finshed"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
   <ArticleItem v-for="obj in articleitemList" 
      :key="obj.art_id" 
      :artObj="obj"
      :isShow="false"
      @click.native="itemClickFn(obj.art_id)"></ArticleItem>
</van-list>
     
    </div>
</template>

<script>
import {searchResultAPI} from '@/api/index'
// 引入组件
import ArticleItem from '../../components/ArticleItem.vue'
import { List } from 'vant'
export default {
  name: 'SearchResult',
  data () {
    return {
      page: 1, // 页码
      articleitemList: [], // 文章列表数据
      loadding: false, // 加载状态
      finshed: false // 是否全部加载完成
    }
  },
  async created () {
    const res = await searchResultAPI({
      page: this.page,
      q: this.$route.params.kw
    })
    this.articleitemList = res.data.data.results
  },
  components: {
    ArticleItem
  },
  methods: {
    async onLoad () {
      if(this.articleitemList.length > 0) {
        this.page++
        const res = await searchResultAPI({
        page: this.page,
        q: this.$route.params.kw
      })
        
      if(res.data.data.results.length === 0) {
        // 没有更多数据
       return this.finshed = true
      }
      this.articleitemList = [...this.articleitemList,...res.data.data.results]

      this.loadding = false
      }
    },
    // 跳转到详情
    itemClickFn (id) {
      this.$router.push({
        path: `/deteil?art_id=${id}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}

/* 此类名是van-nav-bar组件内根标签 */
  .van-nav-bar {
    background-color: #007bff;
  }
  /* 此选择器名字是van-nav-bar组件内标签scoped尝试把此选择器后属性选择器匹配当前页面标签(选不中组件内部的) */
  // lang="less" 当前style标签内是less语法
  // /deep/ 会把属性选择器加到前面(用后代选择器的方式取款找匹配的类名)
  // 结论：要修改组件内样式,如果你用了scoped,就需要在选择器前/deep/即可
  /deep/ .van-nav-bar__title {
    color: white;
  }
</style>
